<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
  <head>
    <meta charset="utf-8" />
  </head>
  <body style="height: 100%; margin: 0">
    <!-- <div id="img" style="float: left; text-align: left">
      <img src="./logo2.png" alt="" style="width: 120px" />
    </div> -->
    <div id="container" style="height: 100%"></div>

    <script type="text/javascript" src="./echarts.js"></script>
    <!-- Uncomment this line if you want to dataTool extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.2/dist/extension/dataTool.min.js"></script>
  -->
    <!-- Uncomment this line if you want to use gl extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
  -->
    <!-- Uncomment this line if you want to echarts-stat extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
  -->
    <!-- Uncomment this line if you want to use map
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/map/js/china.js"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/map/js/world.js"></script>
  -->
    <!-- Uncomment these two lines if you want to use bmap extension
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.2/dist/extension/bmap.min.js"></script>
  -->

    <script type="text/javascript">
      var dom = document.getElementById("container");
      var myChart = echarts.init(dom, null, {
        renderer: "canvas",
        useDirtyRect: false,
      });
      var app = {};
      var barWidth = "auto";
      var option;
      var colors = [
        "#061178",
        "#f2ca6b",
        "#91CC75",
        "#EE6666",
        "#87e8de",
        "#08979c",
        "#2b66bd",
      ];
      var lesscolors = ["#f2ca6b", "#91CC75", "#EE6666", "#87e8de", "#5b8c00",];
      var labelOption = {
        show: true,
        position: "top",
        distance: 15,
        align: "center",
        formatter: function ({ data, value }) {
          const { zzl = "", name } = data;
          const res = zzl.includes("-")
            ? [`\n${name}`, `同期增长率\n{a|${zzl}%}\n`, `{c|${value}}`]
            : [`\n${name}`, `同期增长率\n{b|${zzl}%}\n`, `{c|${value}}`];
          //   return `同期增长率：\n${zzl}% \n\n${value} `;
          return zzl === ""
            ? [`\n${name}`, `{c|${value}}`].join("\n")
            : res.join("\n");
        },
        fontSize: 12,
        rich: {
          a: {
            color: "red",
          },
          b: {
            color: "green",
          },
          c: {
            color: "black",
          },
        },
      };
      option = {
        baseOption: {
          color: colors,
          timeline: {
            axisType: "category",
            // realtime: false,
            // loop: false,
            autoPlay: true,
            // currentIndex: 1,
            playInterval: 20000,
            // controlStyle: {
            //     position: 'left'
            // },
            data: ["累计"],
          },
          tooltip: {
            // show: false
          },
          legend: {
            show: true,
            top: 80,
            data: [
              { name: "一建" },
              { name: "三箭" },
              { name: "四建" },
              { name: "安装" },
              { name: "合计" },
            ],
          },
          calculable: true,
          grid: {
            top: 120,
            bottom: 100,
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
                label: {
                  show: true,
                  formatter: function (params) {
                    return params.value.replace("\n", "");
                  },
                },
              },
            },
          },
          xAxis: [
            {
              type: "category",
              axisLabel: { interval: 0 },
              data: ["中标金额(万元)", "中标面积(平方米)","新签合同额(万元)"],
              // data: ["中标金额(万元)", "中标面积(平方米)",],
              splitLine: { show: false },
            },
          ],
          yAxis: [
            {
              // show: false,
              type: "value",
              name: "",
              max: function (value) {
                return parseInt(value.max * 1.1);
              },
              // axisLabel: {
              //   formatter: "{value}万元",
              // },
            },
          ],
          // series: [
          //   {
          //     type: "bar",
          //     name: "一建",
          //     label: labelOption,
          //     barMinHeight: 0,
          //     barWidth,
          //     emphasis: {
          //       focus: "series",
          //     },
          //   },

          //   {
          //     type: "bar",
          //     name: "三箭",
          //     label: labelOption,
          //     barMinHeight: 0,
          //     barWidth,
          //     emphasis: {
          //       focus: "series",
          //     },
          //   },

          //   {
          //     type: "bar",
          //     name: "四建",
          //     label: labelOption,
          //     barMinHeight: 0,
          //     barWidth,
          //     emphasis: {
          //       focus: "series",
          //     },
          //   },
          //   {
          //     type: "bar",
          //     name: "安装",
          //     label: labelOption,
          //     barMinHeight: 0,
          //     barWidth,
          //     emphasis: {
          //       focus: "series",
          //     },
          //   },
          //   {
          //     type: "bar",
          //     name: "建工集团",
          //     label: labelOption,
          //     barMinHeight: 0,
          //     barWidth,
          //     emphasis: {
          //       focus: "series",
          //     },
          //   },
          //   // {
          //   //   type: "bar",
          //   //   name: "合计",
          //   //   label: labelOption,
          //   //   barMinHeight: 0,
          //   //   barWidth,
          //   //   emphasis: {
          //   //     focus: "series",
          //   //   },
          //   // },
          // ],
        },
        options: [
          {
            title: {
              text: "本年度累计数据",
              x: "center",
              y: "top",
              textAlign: "left",
              textStyle: {
                fontSize: 30,
                lineHeight: 60,
                height: 100,
              },
            },
            legend: {
              show: true,
              top: 80,
              data: [
                { name: "一建" },
                { name: "三箭" },
                { name: "四建" },
                { name: "安装" },
                { name: "建材科技" },
                { name: "建工集团" },
                { name: "合计" },
              ],
            },
            series: [
              {
                type: "bar",
                name: "一建",
                label: labelOption,
                barMinHeight: 0,
                barWidth,
                emphasis: {
                  focus: "series",
                },
                data: [
                  // { name: "一建", value: "325999.77", zzl: "49.22" },
                  // { name: "一建", value: "1167569.99", zzl: "71.83" },
                  // { name: "一建", value: "345980.86", zzl: "59.19" },
                  // { name: "一建", value: "", zzl: "" },
                  { name: "一建", value: "351942.30", zzl: "46.62" },
                  { name: "一建", value: "1244553.85", zzl: "71.83" },
                  { name: "一建", value: "345980.86", zzl: "58.41" },
                ],
              },
              {
                type: "bar",
                name: "三箭",
                label: labelOption,
                barMinHeight: 0,
                barWidth,
                emphasis: {
                  focus: "series",
                },
                data: [
                  // { name: "三箭", value: "249679.86", zzl: "-18.21" },
                  // { name: "三箭", value: "501083.95", zzl: "-52.42" },
                  // { name: "三箭", value: "267097.24", zzl: "6.65" },
                  // { name: "三箭", value: "", zzl: "" },
                  { name: "三箭", value: "279790.48", zzl: "-17.22" },
                  { name: "三箭", value: "584398.68", zzl: "-49.79" },
                  { name: "三箭", value: "267097.24", zzl: "-16.61" },
                ],
              },
              {
                type: "bar",
                name: "四建",
                label: labelOption,
                barMinHeight: 0,
                barWidth,
                emphasis: {
                  focus: "series",
                },
                data: [
                  // { name: "四建", value: "311015.25", zzl: "52.97" },
                  // { name: "四建", value: "706961.03", zzl: "-8.22" },
                  // { name: "四建", value: "293803.04", zzl: "54.10" },
                  // { name: "四建", value: "", zzl: "" },
                  { name: "四建", value: "446536.54", zzl: "89.55" },
                  { name: "四建", value: "1126018.03", zzl: "25.25" },
                  { name: "四建", value: "293803.04", zzl: "36.96" },
                ],
              },
              {
                type: "bar",
                name: "安装",
                label: labelOption,
                barMinHeight: 0,
                barWidth,
                emphasis: {
                  focus: "series",
                },
                data: [
                  // { name: "安装", value: "98790.02", zzl: "93.89" },
                  // { name: "安装", value: "124924", zzl: "100" },
                  // { name: "安装", value: "31066.66", zzl: "-39.03" },
                  // { name: "安装", value: "", zzl: "" },
                  { name: "安装", value: "102540.57", zzl: "78.18" },
                  { name: "安装", value: "124924", zzl: "100" },
                  { name: "安装", value: "31066.66", zzl: "-46.02" },
                ],
              },
              {
                type: "bar",
                name: "建材科技",
                label: labelOption,
                barMinHeight: 0,
                barWidth,
                emphasis: {
                  focus: "series",
                },
                data: [
                  // { name: "建材科技", value: "70198.11", zzl: "100" },
                  // { name: "建材科技", value: "/", zzl: "" },
                  // { name: "建材科技", value: "35713.05", zzl: "100" },
                  // { name: "建材科技", value: "", zzl: "" },
                  { name: "建材科技", value: "70198.11", zzl: "" },
                  { name: "建材科技", value: "/", zzl: "" },
                  { name: "建材科技", value: "35713.05", zzl: "" },
                ],
              },
              {
                type: "bar",
                name: "建工集团",
                label: labelOption,
                barMinHeight: 0,
                barWidth,
                emphasis: {
                  focus: "series",
                },
                data: [
                  // { name: "建工集团", value: "517669.06", zzl: "100" },
                  // { name: "建工集团", value: "846519.59", zzl: "100" },
                  // { name: "建工集团", value: "/", zzl: "" },
                  // { name: "建工集团", value: "", zzl: "" },
                  { name: "建工集团", value: "538323.32", zzl: "" },
                  { name: "建工集团", value: "1370421.81", zzl: "" },
                  { name: "建工集团", value: "", zzl: "" },
                ],
              },
              // {
              //   type: "bar",
              //   name: "合计",
              //   label: labelOption,
              //   barMinHeight: 0,
              //   barWidth,
              //   emphasis: {
              //     focus: "series",
              //   },
              //   data: [
              //     { name: "合计", value: "1347554.63", zzl: "" },
              //     { name: "合计", value: "3209189.78", zzl: "" },
              //     { name: "合计", value: "973660.85", zzl: "" },
              //   ],
              // },
            ],
          },
        ],
      };
      if (option && typeof option === "object") {
        myChart.setOption(option);
      }
      window.addEventListener("resize", myChart.resize);
    </script>
  </body>
</html>
